<template>
  <div style="background: black">
    <canvas id="bg" width="1000" height="1000"/>
    <div class="cockpitMainBox" >
      <cockpit-detail v-show="showDetail" @everydaySales="openDetail('everydaySales')"  :visible.sync="showDetail" :data="detailData" />
      <div class="title">
        <div class="titleText flex a-item">财务销售收支数据看板</div>
      </div>
      <div class="annual tableBox">
      <div class="more" @click="openDetail('proportion')"></div>
      <div class="leftBor" />
      <div class="rightBor" />
      <div class="reportTitle">
        全年销售数据
      </div>
      <div class="xial"/>
    </div>
      <div class="salesTotal">
        <div class="leftBor" />
        <div class="rightBor" />
        <div class="salesTotalTitle">
          销售总额
        </div>
        <div class="salesVolume">
          <div class="salesVolumeAmount">99999</div>
        </div>
        <div style="width: ">
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="salesAnnul tableBox">
        <div class="more" @click="openDetail('proportion')"></div>
        <div class="leftBor" />
        <div class="rightBor" />
        <div class="reportTitle">
          各年份总销售额
        </div>
        <div class="xial"/>
      </div>
      <div class="directOrNotSaleReceive tableBox">
        <div class="more" @click="openDetail('proportion')"></div>
        <div class="leftBor" />
        <div class="rightBor" />
        <div class="reportTitle">
          直营非直营应收与销售占比
        </div>
        <div class="xial"/>
      </div>
      <div class="monthlyAcceptTaxAmountTendency tableBox">
        <div class="more" @click="openDetail('proportion')"></div>
        <div class="leftBor" />
        <div class="rightBor" />
        <div class="reportTitle">
          年份销售额走势图
        </div>
        <div class="xial"/>
      </div>
    </div>
  </div>
</template>

<script>
import echartsTemplate from '@/components/echartsTemplate/echartsTemplate'
import { debounce } from '../../../utils/auth'
import cockpitDetail from './cockpitDetail'
import { getCockpit } from '../../../api/erp/cockpit'
import Vue from 'vue'

export default {
  name: 'financeCockpit',
  components:{echartsTemplate, cockpitDetail},
  data(){
    return{
      status:0,
      query:{
        year:2023,
        month:1
      },
      showDetail:false,
      everydaySalesOption:{},
      proportionOption:{},
      brandOption:{},
      salesVolumeOption:{},
      irrigationDitchOption:{},
      cityOption:{},
      cockpitData:{
        totalSale:{
          acceptTaxAmountSum:[]
        }
      },
      //当前需要显示的直营公司
      showcompanylist:[],
      //明细数据
      detailData:{
        title:'公司直营数据',
        props:[{prop:'companyName',label:'配送中心'},{prop:'orderCount',label: '销售单数'},{prop:'acceptBoxCount',label:'销售箱数'},{prop:'acceptTaxAmount',label:'销售金额'}],
        data:[]
      },
      detailProps:{
        company:{
          title:'公司直营数据',
          props:[{prop:'companyName',label:'配送中心'},{prop:'orderCount',label: '销售单数'},{prop:'acceptBoxCount',label:'销售箱数'},{prop:'acceptTaxAmount',label:'销售金额'}],
          data:[]
        },
        everydaySales:{
          title:'每日销售额',
          props:[
            {prop:'companyName',label:'配送中心'},
            {prop:'boxNum',label:'箱数'},
            {prop:'amount',label:'金额'},
            {prop:'operate',label:'操作'}
          ],
          data:[]
        },
        proportion:{
          title:'直营和非直营比例占比',
          props:[
            {prop:'companyName',label:'配送中心'},
            {prop:'directAcceptTaxAmount',label:'直营销售金额'},
            {prop:'indirectAcceptTaxAmount',label:'非直营销售金额'}
          ],
        },
        brand:{
          title:'品牌销量',
          props:[
            {prop:'goodsBrandName',label:'品牌名称'},
            {prop:'acceptBoxCount',label:'箱数'},
            {prop:'acceptTaxAmount',label:'金额'}
          ],
        },
        irrigationDitch:{
          title:'客户分类',
          props:[
            {prop:'customerTypeName',label:'客户分类'},
            {prop:'acceptBoxCount',label:'箱数'},
            {prop:'acceptTaxAmount',label:'金额'}
          ],
        },
        city:{
          title:'主要城市销售额',
          props:[
            {prop:'companyName',label:'城市'},
            {prop:'acceptBoxCountSum',label:'箱数'},
            {prop:'acceptTaxAmountSum',label:'金额'}
          ],
        },
      },
      //解决echarts无法跟随屏幕变化更新高度
      /**
       * width 容器宽度
       * height 容器高度
       * widthProportion: 容器占父级元素宽度百分比‘
       * heightProportion: 容器占父级元素高度百分比
       * */
      containSizes:{

      },
      app:null,
      bg:null,
      ctx:null,
      bgConfig:{
        columnsCount:0,
        charIndex:[],
      },
      ctxfontSize:0,
    }
  },
  created() {
    window.addEventListener('keydown',(e)=>{
      if(e.code === 'F11'){
        e.preventDefault()
        if (this.status){
          this.unqp()
        }else {
          this.qp()
        }

      }
    })
    this.onGet()
    setInterval(()=>{
      this.onGet()
    },1000*600)
  },
  mounted() {
    document.querySelector('.cockpitMainBox').style.height=`calc(100vh - ${84 / this.getRatio()}px)`
    this.app = document.querySelector('.app-main')
    const domResize = new ResizeObserver(()=>{
      this.setSize()
    })
    const _this = this
    window.addEventListener('resize',debounce(function(){
      document.querySelector('.cockpitMainBox').style.height=`100vh`
      _this.computedSize()
    }))
    domResize.observe(this.app)
    //背景文字坠落
    this.bg = document.querySelector('#bg')
    this.ctx = this.bg.getContext('2d')
    setInterval(()=>{
      this.draw()
    },40)

  },
  methods:{
    async onGet(){

    },
    getRatio() {
      var ratio = 0
      var screen = window.screen
      var ua = navigator.userAgent.toLowerCase()

      if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio
      } else if (~ua.indexOf('msie')) {
        if (screen.deviceXDPI && screen.logicalXDPI) {
          ratio = screen.deviceXDPI / screen.logicalXDPI
        }
      } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
        ratio = window.outerWidth / window.innerWidth
      }

      if (ratio) {
        ratio = ratio / 1.25
      }
      return ratio
    },
    openDetail(type){
      this.showDetail = true
      this.detailData = this.detailProps[type]
    },
    draw(){
      this.ctx.fillStyle='rgba(0,0,0,.1)'
      this.ctx.fillRect(0,0,this.bg.width,this.bg.height)
      this.ctx.textBaseline = 'top'
      this.ctx.fillStyle='rgba(0,0,255,.3)'
      const y = (this.bg.height/this.ctxfontSize)>>0
      for(let i=0;i<this.bgConfig.columnsCount;i++){
        this.ctx.fillText(this.getRandomChar(),i*this.ctxfontSize,this.bgConfig.charIndex[i]*this.ctxfontSize)
        if(y < this.bg.height&&Math.random()>0.99){
          this.bgConfig.charIndex[i] = 0
        }else{
          this.bgConfig.charIndex[i]++
        }

      }
    },

    getRandomChar(){
      const str = '123456789qwertyuiopasdfghjklzxcvbnm'
      return str[(Math.random() * str.length)>>0]
    },
    computedSize(){
      Object.keys(this.containSizes).forEach(item=>{
        this.containSizes[item].width = `${document.querySelector(`.${item}`).offsetWidth * this.containSizes[item].widthProportion}px`
        this.containSizes[item].height = `${document.querySelector(`.${item}`).offsetHeight * this.containSizes[item].heightProportion}px`
      })
    },
    setSize:debounce(function(){
      this.computedSize()
      const size1 = (this.app.offsetWidth / 1920).toFixed(2) * 30
      const size2 = (this.app.offsetHeight / 1080).toFixed(2) * 30
      const size = Math.min(size1,size2)
      this.ctxfontSize = (this.bg.width / 60) >> 0
      this.ctx.font=`${this.ctxfontSize}px 微软雅黑`
      this.bgConfig.columnsCount =(this.bg.width / this.ctxfontSize)>> 0
      this.bgConfig.charIndex = new Array(this.bgConfig.columnsCount).fill(0)
      document.getElementsByTagName('body')[0].style.setProperty('--cockpitMainBoxFontSize',`${~~size}px`)
    },100),
    qp(){
      document.getElementsByTagName('body')[0].style.setProperty('--defaultContainerWidth','0')
      document.getElementsByTagName('body')[0].style.setProperty('--defaultAppMainPt','0')
      document.getElementsByTagName('body')[0].style.setProperty('--defaultAppMainZIndex','10')
      document.getElementsByTagName('body')[0].style.setProperty('--defaultSideBarWidth','0')
      if(document.documentElement.RequestFullScreen){
        document.documentElement.RequestFullScreen();
      }
      //兼容火狐
      if(document.documentElement.mozRequestFullScreen){
        document.documentElement.mozRequestFullScreen();
      }
      //兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
      if(document.documentElement.webkitRequestFullScreen){
        document.documentElement.webkitRequestFullScreen();
      }
      //兼容IE,只能写msRequestFullscreen
      if(document.documentElement.msRequestFullscreen){
        document.documentElement.msRequestFullscreen();
      }
      this.status = 1
      document.querySelector('.fixed-header').style.display = 'none'
      document.querySelector('.cockpitMainBox').style.height=`${window.screen.height / this.getRatio()}px`
      document.querySelector('#el-main-footer').style.display = 'none'
    },
    unqp(){
      document.getElementsByTagName('body')[0].style.setProperty('--defaultContainerWidth','54px')
      document.getElementsByTagName('body')[0].style.setProperty('--defaultAppMainPt','84px')
      document.getElementsByTagName('body')[0].style.setProperty('--defaultAppMainZIndex','0')
      document.getElementsByTagName('body')[0].style.setProperty('--defaultSideBarWidth','200px')
      if(document.exitFullScreen){
        document.exitFullscreen()
      }
      //兼容火狐
      if(document.mozCancelFullScreen){
        document.mozCancelFullScreen()
      }
      //兼容谷歌等
      if(document.webkitExitFullscreen){
        document.webkitExitFullscreen()
      }
      //兼容IE
      if(document.msExitFullscreen){
        document.msExitFullscreen()
      }
      this.status = 0
      document.querySelector('.cockpitMainBox').style.height=`${window.screen.height / this.getRatio()}px`
      document.querySelector('#el-main-footer').style.display = 'block'
      document.querySelector('.fixed-header').style.display = 'block'
      document.querySelector('.sidebar-container').style.display = 'block'
    },

  }
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'SourceHanSansCN-Medium';
  src: local('SourceHanSansCN-Medium'), url('../../../assets/font_icon/SourceHanSansCN-Medium.otf') format('opentype');
}
.cockpitMainBox{
  font-family: SourceHanSansCN-Medium;
  //background-image: url("../../../assets/images/cockpitBg.png");
  z-index: 2;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  min-width: 800px;
  font-size: var(--cockpitMainBoxFontSize,30px);
  transition: font-size linear 0.1s;
  position: relative;
  .title{
    background-image: url("../../../assets/images/cockpit/top_bg.png");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 10%;
    opacity:1;
    position: relative;
    .titleText{
      width: 45%;
      height: 100%;
      margin: auto;
      bottom: 0;
      font-size:1.2em;
      color: white;
      justify-content: center;
      letter-spacing: 2px;
    }
  }
  .annual {
    width: 27.6%;
    height: 21.7%;
    margin-left: 1%;
    top: 11%;
  }
  .salesTotal{
    background-image: url("../../../assets/images/cockpit/xiaoshouzonge01_bg .png");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 40.6%;
    height: 55.1%;
    margin-left: 29.6%;
    .salesTotalTitle{
      width: 100%;
      display: flex;
      justify-content: center;
      font-size: 0.9em;
      color: white;

    }
    .salesVolume{
      width: 40%;
      height: 55%;
      padding-top: 3%;
      background-image: url("../../../assets/images/cockpit/xiaoshoue.png");
      background-position: center;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      .salesVolumeAmount{
        color: white;
        margin: auto;
        font-size: 1em;
        &:after{
          content: '万元';
          font-size: 0.5em;
          transform: scale(.8);
          display: block;
          text-align: center;
        }
      }
    }
  }
  .salesAnnul{
    width: 27.6%;
    height: 21.7%;
    margin-left:71%;
    position: absolute;
    top: 11%;
  }
  .directOrNotSaleReceive{
    width: 27.6%;
    height: 42%;
    margin-left:1%;
    position: absolute;
    top: 35%;
  }
  .monthlyAcceptTaxAmountTendency{
    width: 27.6%;
    height: 21.7%;
    margin-left:71%;
    position: absolute;
    top: 35%;
  }
  .monthlyAcceptTaxAmountTendency{
    width: 27.6%;
    height: 21.7%;
    margin-left:71%;
    position: absolute;
    top: 35%;
  }
}
.tableBox{
  background-color: rgba(0,0,255,.18);
  background-size: 100%;
  position: absolute;
  padding: 10px 10px 0 10px;
  .reportTitle{
    font-size: 0.6em;
    color: #FEFEFE;
  }
  .xial{
    width: 45px;
    height: 10px;
    background-image: url("../../../assets/images/cockpit/xial.png");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .leftBor{
    height: 100%;
    position: absolute;
    left: 0;
    margin-top: -10px;
    &:before{
      @extend %subscript;
      border-left: #64FAFC 3px solid;
      border-top: #64FAFC 3px solid;
      left: 0;
      top: 0;
      width: 5px;
      height: 5px;
    }
    &:after{
      @extend %subscript;
      border-left: #64FAFC 3px solid;
      border-bottom: #64FAFC 3px solid;
      left: 0;
      bottom: 0;
      width: 5px;
      height: 5px;
    }
  }
  .rightBor{
    height: 100%;
    position: absolute;
    right: 5px;
    margin-top: -10px;
    &:before{
      @extend %subscript;
      border-right: #64FAFC 3px solid;
      border-top: #64FAFC 3px solid;
      left: 0;
      top: 0;
      width: 5px;
      height: 5px;
    }
    &:after{
      @extend %subscript;
      border-right: #64FAFC 3px solid;
      border-bottom: #64FAFC 3px solid;
      left: 0;
      bottom: 0;
      width: 5px;
      height: 5px;
    }
  }
  .contentReport{
    border: rgba(0,0,255,0.1) 2px solid;
    position: relative;
    background: rgba(255,255,255,.05);
  }
  .containerLeftBor{
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    &:before{
      @extend %subscript;
      border-left: rgba(0,0,255,.3) 2px solid;
      border-top: rgba(0,0,255,.3) 2px solid;
      left: 0;
      top: 0;
      height: 5px;
    }
    &:after{
      @extend %subscript;
      border-left: rgba(0,0,255,.3) 2px solid;
      border-bottom: rgba(0,0,255,.3) 2px solid;
      left: 0;
      bottom: 0;
      height: 5px;
    }
  }
  .containerRightBor{
    height: 100%;
    position: absolute;
    right: 5px;
    top: 0;
    &:before{
      @extend %subscript;
      border-right: rgba(0,0,255,.3) 2px solid;
      border-top: rgba(0,0,255,.3) 2px solid;
      left: 0;
      top: 0;
      height: 5px;
    }
    &:after{
      @extend %subscript;
      border-right: rgba(0,0,255,.3) 2px solid;
      border-bottom: rgba(0,0,255,.3) 2px solid;
      left: 0;
      bottom: 0;
      height: 5px;
    }
  }
}
.thousand{
  &:after{
    content: ',';
    font-size: 0.3em;
    display: block;
    position: absolute;
    right: 1px;
    bottom: 0;
  }
}
%subscript{
  content: '';
  display: block;
  position: absolute;
  width: 5px;
  height: 5px;
}
#bg{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.more{
  position: absolute;
  right: 10px;
  font-size: 0.5em;
  background: rgba(0,0,255,.2);
  max-height: 4%;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  &:after{
    content:'更多';
    color:white;
    font-weight: 400;
  }
}

</style>
